<template>
	<div>
		<div class="title-main">
			<van-row>
			  <van-col span="2" align="left">
			  	<div @click="onBack">
			  		<van-icon name="arrow-left" size="20"/>
			  	</div>
			  </van-col>
			  <van-col span="20">
			  	<div class="title-text">{{titleName}}</div>
			  </van-col>
			  <van-col span="2" align="right">
			  	<div @click="onHome">
			  		<van-icon name="wap-home-o" size="20"/>
			  	</div>
			  </van-col>
			</van-row>
		</div>
	</div>
</template>

<style scoped>
	.title-main{
		background-color:#FFF;
		padding:10px;
	}
	.title-text{
		font-weight: 600;
		overflow: hidden;
		white-space: nowrap;
		text-overflow:ellipsis;
	}

</style>

<script>
	import { Col, Row ,Icon } from 'vant'; 
	import { useRouter } from 'vue-router'

	export default{
		props:{
			titleName:{
				type:String,
				default:'',
			}
		},
		methods:{
			onBack(){
				this.$router.go(-1)
			},
			onHome(){
				this.$router.push({path:'/tab/home'})
			}
		}
	}

</script>